<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.hit }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >富集结果</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 表格开始 -->
            <template>
              <el-row>
                <el-table
                  border
                  :data="tableData"
                  style="width: 100%; margin: 10px"
                >
                  <el-table-column label="Metabolite Set" prop="Name">
                  </el-table-column>
                  <el-table-column label="Total" prop="Total">
                  </el-table-column>
                  <el-table-column label="Hits" prop="Hits"> </el-table-column>
                  <el-table-column label="Expect" prop="Expected">
                  </el-table-column>
                  <el-table-column label="P value	" prop="Raw p">
                  </el-table-column>
                  <el-table-column label="Holm P" prop="Holm p">
                  </el-table-column>
                  <el-table-column label="FDR" prop="FDR"> </el-table-column>
                </el-table>
              </el-row>
            </template>
            <!-- 表格结束 -->
            <el-row>
              <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                <div class="grid-content unseealbe-content"></div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button
                  plain
                  style="margin: 10px"
                  @click="setCurrentMsetLib()"
                  >提交</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
export default {
  data() {
    return {
      paths: [
        { path: "/", hit: "首页" },
        { path: "/algo", hit: "分析算法" },
        { path: "/algo/enrich-normal/enrich-input", hit: "富集分析输入" },
        { path: "/algo/enrich-normal/enrich-list", hit: "富集分析输入列表" },
        { path: "/algo/enrich-normal/enrich-parameter", hit: "富集分析参数列表" },
        { path: "/algo/enrich-normal/enrich-graph", hit: "富集分析结果" },
      ],
      tableData:[],
      cmd:''
    };
  },
  created() {
    this.cmd = `mSet<-CalculateHyperScore(mSet)`
    algo.EnrichCalculate(this.cmd).then((response) => {
      this.tableData = response.data.data.Table;
    });
  },
  methods: {},
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>